<template>
	<view class="changelist">
		<scroll-view class="scollView" scroll-y="true" :scroll-into-view="viewId">
			<view class="city-box">
				<view class="box">
					<view @click="getcityList()" class="title">
						<icon class="iconfont icon-31dingwei iconDingwei">
						</icon>
						当前城市
					</view>
					<view class="currentCity">
						{{tCity}}
					</view>
				</view>
				<view class="box">
					<view class="title">
						热门城市
					</view>
					<view class="hotList">
						<view v-for="(item,index) in list" :key="index" class="item">
							{{item}}
						</view>
					</view>
				</view>
				<view class="box-list" v-for="(item,index) in cityList" :key="index">
					<view class="inital" :id="item.initial">
						{{item.initial}}
					</view>
					<view 
					class="city-name" 
					v-for="(x,y) in item.list" 
					:key="y"
					@click="changeCityClick(x.name)"
					>
						{{x.name}}
					</view>
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default{
		props:["cityList","alpahel"],
		data(){
			return{
				list:["重庆","北京","西安","北京","北京","北京","北京","北京","北京",],
				viewId:"",
				tCity:"重庆"
			}
		},
		watch:{
			alpahel(){
				this.viewId=this.alpahel
			}
		},
	   onLoad(){
		   uni.getStorage({
		   	key:'city',
		   	success:(res)=>{
				console.log(res.data)
		   		this.tCity=res.data
		   	}
		   })
	   },
		methods: {
			changeCityClick(res){
				uni.setStorage({
					key:'city',
					data:res,
				})
				uni.getStorage({
					key:'city',
					success:(res)=>{
						this.tCity=res.data
					}
				})
				uni.redirectTo({
					url:'/pages/city/city'
				})
			}
		
		}
	}
</script>

<style>
	.changelist{
		width: 100%;
		background: #000000;
		height: 100%;
	}
	.box{
		background: #222222;
		margin-top: 10px;
		padding:0 5px 20px 5px;
		color: #AAAAAA;
	}
	.title{
		height: 40px;
		line-height: 40px;
		color: #AAAAAA;
		margin-left: 15px;
		font-size: 15px;
	}
	.iconDingwei{
		margin-right: 9px;
	}
	.currentCity{
		color: #AAAAAA;
		font-size: 14px;
		margin-left: 15px;
		height: 30px;
		line-height: 30px;
	}
	.hotList{
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content: start;
		flex-wrap: wrap;
	}
	.item{
		width: 30%;
		height: 25px;
		line-height: 25px;
		font-size: 15px;
		background: #333333;
		text-align: center;
		color: #AAAAAA;
		margin-top:8px;
		margin-left:8px
	}
	.box-list{
		color: #AAAAAA;
		padding: 8px 5px;
		font-size: 14px;
	}
	.inital{
		height: 25px;
		line-height: 25px;
		background: #000000;
		padding-left: 10px;
		color: #666666;
	}
	.city-name{
		background: #222222;
		height: 40px;
		line-height: 40px;
		margin-left: 3px;
		padding-left: 13px;
		color: #AAAAAA;
		border-bottom: 1px solid #3c3737 ;
	}
	.scollView{
		height: 100%;
	}
</style>
